<script setup>
import Color from "../setting/Color.vue";
import AlphaColor from "../setting/AlphaColor.vue";

const props = defineProps({
  config: {
    type: Object,
    required: true,
  },
  name: {
    type: String,
    default: "",
  },
  disabled: {
    type: Boolean,
    default: false,
  },
});

const emits = defineEmits(["update:config", "change"]),
  original = inject("original", "merchant"),
  currencyList = inject("currencyList", []);

const form = ref({
  $position: { top: 24, left: 30 },
  $positionType: "absolute",
  $removeable: true,
  color: "#ffffff",
  backgroundColor: "rgba(0,0,0,0.6)",
});

const formRef = ref();

const rules = {
  integralId: [
    { required: true, message: "请选择积分类型", trigger: "change" },
  ],
};

const detail = computed({
  get: () => {
    return Object.assign({}, form.value, props.config);
  },
  set: (val) => {
    emits("update:config", val);
    emits("change", val);
  },
});

const onChange = (val) => {
  detail.value = detail.value;
};

const check = () => {
  return new Promise((resolve, reject) => {
    formRef.value.validate(async (valid, invalidFields) => {
      if (valid) {
        resolve();
      } else
        reject(
          `${props.name}校验未通过，${
            invalidFields[Object.keys(invalidFields)[0]][0].message
          }`
        );
    });
  });
};

onMounted(() => {
  nextTick(() => {
    onChange();
  });
});

defineExpose({ check });
</script>
<template>
  <el-form
    ref="formRef"
    :model="detail"
    :rules="rules"
    :disabled="disabled"
    label-width="auto"
  >
    <el-form-item
      v-if="original === 'merchant'"
      label="积分类型:"
      prop="integralId"
    >
      <el-select
        v-model="detail.integralId"
        placeholder="请选择"
        style="width: 100px"
        @change="onChange"
      >
        <el-option
          v-for="(item, key) in currencyList"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
    </el-form-item>

    <Color v-model="detail.color" name="文字颜色" @change="onChange" />
    <AlphaColor
      v-model="detail.backgroundColor"
      name="背景色"
      @change="onChange"
    />
  </el-form>
</template>
